import React from 'react'
import { Space, Table, Pagination, Button, Input, DatePicker, Tree, } from 'antd';
export default function collectSmart() {
  const { RangePicker } = DatePicker;
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: "center",
      width: "5%",
      render: (text, record, index) => {
        return <span style={{ fontSize: "12px" }}>{index + 1}</span>
      }
    },
    {
      title: '采集日期',
      dataIndex: 'collectTime',
      key: 'collectTime',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '管理组件总在线数',
      dataIndex: 'manageComNum',
      key: 'manageComNum',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '采集总设备数',
      dataIndex: 'collectDevNum',
      key: 'collectDevNum',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '采集成功数',
      dataIndex: 'collectSucNum',
      key: 'collectSucNum',
      align: "center",
      width: "12%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '连接超时数',
      dataIndex: 'conTimeOutNum',
      key: 'conTimeOutNum',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '按规范安装APP设备数',
      dataIndex: 'specInstallNum',
      key: 'specInstallNum',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: 'EDGECLI服务未启动数',
      dataIndex: 'noEDGECLINum',
      key: 'noEDGECLINum',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: 'ESN号数',
      dataIndex: 'ESNUm',
      key: 'ESNUm',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: 'APP数量',
      dataIndex: 'APPNum',
      key: 'APPNum',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      fixed: 'right',
      align: "center",
      width: "10%",
      render: (text, item) => {
        return <Space>
          <a style={{ fontSize: "12px", }} >下载</a>
        </Space>
      }
    },
  ];
  const data = [
    {
      key: '1',
      collectTime: '2023-08-21',
      manageComNum: "23432",
      collectDevNum: '30000',
      collectSucNum: "28433",
      conTimeOutNum: "1646",
      specInstallNum: "2603",
      noEDGECLINum: "3",
      ESNUm: "28345",
      APPNum: "40",
    },

  ];
  const getRowClassName = (record, index) => {
    let className = '';
    className = index % 2 === 0 ? "oddRow" : "evenRow";
    return className
  }
  return (
    <div style={{ minHeight: "545px" }}>
      <div style={{ fontSize: "12px", margin: "15px 0 0 0", borderRadius: "5px" }}>
        <div style={{ background: "white", height: "50px", lineHeight: "50px", padding: "0  20px" }}>
          <span style={{ fontSize: "14px" }}>采集记录</span>
          <Button style={{ float: "right", top: "9px", fontSize: "12px", backgroundColor: "#1FBBA9", color: "white" }}>批量解析</Button>
        </div>
        <div style={{ background: "white", margin: "15px 0 0 0", padding: "20px 20px", borderRadius: "5px", height: document.documentElement.clientHeight - 200 }}>
          <Space>
            <div >
              起止时间
              <RangePicker className='centerInput' placeholder={["开始日期", "结束日期"]} separator="~" style={{ margin: "0 0 0 10px" }} suffixIcon="" />

            </div>
          </Space>
          <Space size={10} style={{ float: "right" }}>
            <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>查询</Button>
            <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px" }}>重置</Button>
          </Space>

          <Table
            rowClassName={(record, index) => getRowClassName(record, index)}
            columns={columns} dataSource={data} style={{ border: "1px solid #c9cacac7", margin: "10px 0 0 0" }}
            pagination={false}
            size='small'
          >

          </Table>
          <Pagination
            total={100}
            showTotal={(total) => `共 ${total} 条记录 第1~${total > 9 ? 10 : total} 条`}
            defaultCurrent={1}
            showSizeChanger={false}
            style={{ margin: "10px 0 0 0", fontSize: "12px" }}
          />

        </div>
      </div>
    </div>
  )
}
